<template>
  <div id="readContract">
    <h3 class="table">
      黄石市建筑行业农民工简明劳动合同书
      <el-button class="saveBtn exportContract" @click="exportContract"
        >导出</el-button
      >
    </h3>
    <!-- <div  style="margin-top:20px" class="clearfix">
          <div class="fr">
            合同编号<span class="empty">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </div>
        </div> -->
    <ul class="content" style="margin-top: 10px">
      <li style="text-indent: 0">
        <el-row>
          <el-col :span="24">
            项目名称：
            <span>{{ this.contractInfos.projectName || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"> （甲方）： </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            用工单位名称：
            <span>{{ this.contractInfos.companyName || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            法定代表人：
            <span>{{ this.contractInfos.boss || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            单位委托代理人：
            <span>{{ this.contractInfos.leader || '--' }}</span>
          </el-col>
          <el-col :span="14">
            联系电话：
            <span>{{ this.contractInfos.leaderTel || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"> （乙方）： </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            农民工姓名：
            <span>{{ this.contractInfos.employeeName || '--' }}</span>
          </el-col>
          <el-col :span="14">
            身份证号码：
            <span>{{ this.contractInfos.idcard || '--' }}</span>
          </el-col>
        </el-row>
      </li>
      <li>
        根据《中华人民共和国劳动法》等法律、法规、规定，在平等自愿、协商一致的基础上，双方同意订立本劳动合同。
      </li>
      <li>
        <div>
          一、合同类型和期限。甲、乙双方选择以下第<span>&nbsp;&nbsp;</span>种形式确定本合同期限：
        </div>
        <div class="desc">
          <b>（1）</b>
          有固定的期限：自<span>{{
            this.contractInfos.beginTimeYear || '--'
          }}</span
          >年 <span>{{ this.contractInfos.beginTimeMonth || '--' }}</span
          >月 <span>{{ this.contractInfos.beginTimeDay || '--' }}</span
          >日起至 <span>{{ this.contractInfos.endTimeYear || '--' }}</span
          >年 <span>{{ this.contractInfos.endTimeMonth || '--' }}</span
          >月 <span>{{ this.contractInfos.endTimeDay || '--' }}</span
          >日止。
        </div>
        <div class="desc">
          <b>（2）</b>
          以完成<span>{{ '--' }}</span
          >工作（任务）为期限。自<span>{{
            this.contractInfos.beginTime || '--'
          }}</span
          >开始。
        </div>
      </li>
      <li>
        <div>
          二、工作岗位。乙方在<span>{{
            this.contractInfos.projectName || '--'
          }}</span
          >项目从事 工种<span>{{
            this.contractInfos.workTypeName || '--'
          }}</span
          >工作。
        </div>
      </li>
      <li>
        <div>
          三、劳动报酬。甲方确定乙方执行以下第<span>{{
            this.contractInfos.salaryType || '--'
          }}</span
          >种工资形式，每月<span>25</span>日前发放：
        </div>
        <div class="desc">
          <b>（1）</b>
          计时工资，计时工资包括基本工资和绩效考核工资，其中基本工资<span>{{
            '--'
          }}</span
          >， 按照每月实际考勤天数计发，绩效工资基准数为<span>{{ '--' }}</span
          >， 根据每日进度，工作质量、返工情况，在约定工程量完成后据实结算；
        </div>
        <div class="desc">
          <b>（2）</b>
          计件工资，计件单价每<span>{{ '--' }}</span
          >计算，计件工资分两部分进行发放，平时每月按
          根据实际考勤天数计发，最终计量工资按照计件工作完成情况、返工情况、工作质量、工序节点据实结算；
        </div>
      </li>
      <li>
        其他工资约定事项：<span
          >乙方应按照考勤管理要求，每天上下班刷脸打考勤进出现场，对无考勤记录的不予发放工资。</span
        >
      </li>
      <li>甲方支付乙方的工资，不得低于工程所在地最低工资标准。</li>
      <li>
        <div>四、劳动合同其他内容，按有关法律法规执行。</div>
      </li>
      <li>
        <div>
          五、本合同一式两份，甲乙双方各执一份，交乙方的不得由甲方代为保管。
        </div>
      </li>

      <li style="margin-top: 50px">
        <el-row>
          <el-col :span="12">
            甲方(公章)：
            <span>{{ '--' }}</span>
          </el-col>
          <el-col :span="12" class="signCon">
            乙方（签字）：
            <img :src="this.contractInfos.signatureUrl" alt="" />
          </el-col>
        </el-row>
      </li>
      <li>
        <el-row>
          <el-col :span="24">
            法定代表人（委托代理人）（签字或盖章）:
            <span>{{ '--' }}</span>
          </el-col>
        </el-row>
      </li>
      <li>
        <el-row>
          <el-col :span="12">
            签订日期：
            <span
              >{{ this.contractInfos.confirmYear || '--' }}年{{
                this.contractInfos.confirmMonth || '--'
              }}月{{ this.contractInfos.confirmDay || '--' }}日</span
            >
          </el-col>
          <el-col :span="12">
            签订日期：
            <span
              >{{ this.contractInfos.confirmYear || '--' }}年{{
                this.contractInfos.confirmMonth || '--'
              }}月{{ this.contractInfos.confirmDay || '--' }}日</span
            >
          </el-col>
        </el-row>
      </li>
      <li>
        <div>说明：</div>
        <div>双方劳动合同约定的内容，不得违反国家法律、法规的规定；</div>
        <div>双方对本劳动合同约定内容已仔细阅读，全面理解；</div>
        <div>
          甲乙方所留信息真实有效，作为处理劳动争议、办理有关行政事项的合法信息，如有变更，应以书面形式提前告知对方；
        </div>
        <div>
          本合同应使用钢笔或签字笔填写，自己清楚，涂改处应双方签字或盖章确认。
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  //搜索条件
  props: {
    contractInfos: {
      type: Object,
    },
  },

  created() {},
  methods: {
    exportContract() {
      this.$emit('exportContract', '')
    },
  },
}
</script>
<style scoped lang="less">
.table {
  text-align: center;
}
.content {
  padding: 5px 35px;
}
.content li {
  margin-bottom: 20px;
  text-indent: 20px;
  text-align: left;
}
.content li ul li {
  margin-bottom: 0px;
  padding-left: 20px;
}
// #readContract .content .partyA li,
// #readContract .content .partyB li {
//   padding-left: 0px;
// }
// #readContract .content .partyA #companyName {
//   display: inline-block;
//   padding: 0px;
//   width: 235px;
// }
// #readContract .content .partyA #companyCode {
//   display: inline-block;
//   padding: 0px;
//   width: 243px;
// }
// #readContract .content .partyA #companyAddress {
//   display: inline-block;
//   padding: 0px;
//   width: 272px;
// }
// #readContract .content .partyB#companyCode {
//   display: inline-block;
//   padding: 0px;
//   width: 239px;
// }
// #readContract .content .partyB #companyAddress {
//   display: inline-block;
//   padding: 0px;
//   width: 263px;
// }
// #readContract .content .partyB #employeeName {
//   display: inline-block;
//   padding: 0px;
//   width: 248px;
// }
// #readContract .content .partyB #employeeBirthday {
//   display: inline-block;
//   padding: 0px;
//   width: 299px;
// }
// #readContract .content .partyB #employeeIdcard {
//   display: inline-block;
//   width: 285px;
//   padding: 0px;
// }
// .content li div {
//   padding-left: 20px;
// }
.content li .box {
  padding-left: 0;
}
.content li span {
  text-align: center;
  padding: 0px 15px;
  border-bottom: 1px solid black;
}
.content li p {
  margin-bottom: 0px;
  font-size: 14px;
}
.content li div input {
  height: 18px;
  width: 18px;
  vertical-align: bottom;
  margin-right: 10px;
  opacity: 1;
  position: static;
  margin-left: 50px;
}
.content li div label:nth-child(2) {
  margin-left: 50px;
}
// #readContractWin + .dialog-button > a {
//   opacity: 0;
// }
.exportContract {
  float: right;
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
}

/deep/ .dialogTable img {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

// .img{
//     width: 100%;
// }

// #readContract .content .el-checkbox{
//   margin: 0 2px;
// }

// .table span,.empty{
//   text-align: center;
//   widows: 20px;
//   padding: 0px 5px;
//   border-bottom: 1px solid black;
// }
// .desc{
//     margin-top: 20px;
// }
// .write{
//     margin-top:10px
// }
.content li {
  line-height: 21px;
}

// 签名图片
#readContract {
  position: relative;
  z-index: 1;
}
.signCon {
  position: relative;
}

.signCon img {
  position: absolute;
  top: -45px;
  left: 125px;
  max-width: 235px;
  z-index: -1;
  height: 110px;
}
</style>
